读写css属性	dom.style.prop
可读写行间样式，没有兼容性问题，碰到float这样的保留字属性，前面加css
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: red;
		}
		.active{
			width: 100px;
			height: 100px;
			background-color: green;
		}

		div::after{
			content: "";
			width: 50px;
			height: 50px;
			background-color: red;
			display: inline-block;
		}

		.orange::after{
			content: "";
			width: 50px;
			height: 50px;
			background-color: orange;
			display: inline-block;
		}

		.blue::after{
			content: "";
			width: 50px;
			height: 50px;
			background-color: blue;
			display: inline-block;
		}
	</style>
<body>
	<div class="orange" style="background-color: red;width: 100px;height: 100px"></div>
	<div></div>
</body>
</html>

<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	console.log(div.style);
	div.style.backgroundColor = "green";//Js里命名不能用-,变量名中不允许使用空格和其他标点符号，改成小驼峰式
	console.log(div.style["width"]);
	//查询计算样式,只读；返回值都是绝对值，没有相对单位；IE8及以下不兼容；复合属性拆解 border  borderwidth
	console.log(window.getComputedStyle(div,null).width)
	//IE独有的属性
	//console.log(div.currentStyle.width);
	//获取伪元素的唯一方法
	window.getComputedStyle(div,"after");
	console.log(window.getComputedStyle(div,"after").width);
</script>

<script type="text/javascript">
	function getStyle(ele,prop){
		if(window.getComputedStyle){
			return window.getComputedStyle(ele,null)[prop];
		}else{
			return ele.currentStyle[prop];
		}
	}
</script>

改变伪类的思路
<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	div.onclick = function(){
		div.className = "blue";
	}
</script>

改变静态元素的思路
<script type="text/javascript">
	var div1 = document.getElementsByTagName('div')[1];
	div1.onclick = function (){
		div1.className = "active";
	}
</script>





